<template>
  <div>
    <!--      条件查询-->
    <el-row>
      <el-col :span="24">
        <el-card header="歌手列表">

          <!--输入框-->
          <el-form :inline="true">
            <el-form-item label="歌手名称">
              <el-input
                  v-model="search.singerName"
                  placeholder="名称"
                  clearable>
              </el-input>
            </el-form-item>

            <!--搜索-->
            <el-form-item>
              <el-button icon="el-icon-search" @click="getSingerList">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card>
          <el-header style="background-color: #ffffff">
            <el-button icon="el-icon-circle-plus-outline" @click="dialog.dialogInsert = true">添加歌手</el-button>
          </el-header>
          <el-table
              :data="tableData"
              style="width: 100%">

            <el-table-column
                type="index"
                width="100"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                prop="singerPhoto"
                width="150"
                label="图片">
              <template v-slot="scope">
                <img :src="scope.row.singerPhoto" alt="" width="90" height="90" style="border-radius: 10px" @click="updatePhoto(scope.row)">
              </template>
            </el-table-column>

            <el-table-column
                prop=""
                width="150"
                label="详情信息">
              <template v-slot="scope">
                <el-button size="mini" @click="toSingerInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="singerName"
                label="姓名">
            </el-table-column>

            <el-table-column
                width="100"
                prop="singerSex"
                label="性别">
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="生日">
            </el-table-column>

            <el-table-column
                prop="singerAddress"
                label="出生地">
            </el-table-column>

            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm
                    :title="('确认删除'+scope.row.singerName+'的数据吗?')"
                    @confirm="handleDelete(scope.row)"
                >
                  <el-button
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      size="mini"
                      type="danger"  slot="reference">删除</el-button>
                </el-popconfirm>

              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog title="歌手详情" :visible.sync="dialog.dialogInfo">
      <el-descriptions class="margin-top" :column="4" direction="vertical" border>
        <el-descriptions-item label="歌手头像">
          <img :src="singer.singerPhoto" style="height: 70px;width: 70px;border-radius: 10px">
        </el-descriptions-item>
        <el-descriptions-item label="用户名" :span="3">{{singer.singerName}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ singer.singerSex }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{singer.create_time}}</el-descriptions-item>
        <el-descriptions-item label="居住地" :span="2">{{ singer.singerAddress }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          {{singer.singerIndroduce}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!--添加-->
    <el-dialog title="歌手信息编辑" :visible.sync="dialog.dialogInsert">
      <el-form>
        <el-form-item label="歌手名" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerName" clearable></el-input>
        </el-form-item>
        <el-form-item label="歌手性别" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerSex" clearable></el-input>
        </el-form-item>
        <el-form-item label="歌手简介" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerIndroduce" clearable></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="歌手生日">
          <el-date-picker
              v-model="singer.create_time"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="歌手住址" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerAddress" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogInsert = false">取 消</el-button>
        <el-button type="primary" @click="submitInsert">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="歌手信息编辑" :visible.sync="dialog.dialogUpdate">
      <el-form>
        <el-form-item label="歌手名" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerName" clearable></el-input>
        </el-form-item>
        <el-form-item label="歌手性别" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerSex" clearable></el-input>
        </el-form-item>
        <el-form-item label="歌手简介" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerIndroduce" clearable></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="歌手生日">
          <el-date-picker
              v-model="singer.create_time"
              type="date"
              placeholder="选择日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="歌手住址" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="singer.singerAddress" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!--图片-->
    <el-dialog title="歌手图片编辑" :visible.sync="dialog.dialogPhoto">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      current: 1, //当前页面
      size: 5, //每页数据条数
      search: {
        faceName: ''
      },
      tableData:[], //查出来的全部集合
      total:0 ,//总数
      dialog:{ //所有的弹窗信息
        dialogInfo:false,
        dialogUpdate:false,
        dialogPhoto:false,
        dialogInsert:false
      },
      singer:{}, //当前歌手的信息
      formLabelWidth:"120px", //编辑页面距离
      singerId:0 //当前被选中的singerId
    }

  },
  created() {
  this.getSingerList()
  },
  methods: {
    updatePhoto(item){
      this.dialog.dialogPhoto = true
      this.singerId = item.singerId
    },
    onSuccess(res){
      console.log(res)
      this.singerPhoto = res.data
      this.$http.get("/singer/updatePhoto",{
        params:{
          singerPhoto:this.singerPhoto,
          singerId:this.singerId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    getSingerList() {
      this.$http.get("/singer/singerList", {
        params: {
          current: this.current,
          size: this.size,
          singerName: this.search.singerName,
        }
      }).then(res => {
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    handleSizeChange(res){
      console.log(res+"1")
    },
    handleCurrentChange(res){
      this.current = res
      this.getSingerList()
    },
    handleEdit(index,row){
      this.dialog.dialogUpdate = true
      this.singerId = row.singerId
      this.$http.get("/singer/findSingerById",{
        params:{
          singerId:row.singerId
        }
      }).then(res=>{
        this.singer=res.data.data
        console.log(res)
      })
    },
    handleDelete(row){
      this.$http.get("/singer/deleteSingerById",{
        params:{
          singerId:row.singerId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    toSingerInfo(row){
      this.dialog.dialogInfo=true
      this.$http.get("/singer/findSingerById",{
        params:{
          singerId : row.singerId
        }
      }).then(res=>{
        this.singer = res.data.data
      })
    },
    open2(){
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '修改失败',
        type: 'warning'
      });
    },
    submitUpdate(){
      this.dialog.dialogUpdate = false
      this.$http.post("/singer/updateSinger",{
        singerName:this.singer.singerName,
        singerSex:this.singer.singerSex,
        singerIndroduce:this.singer.singerIndroduce,
        create_time:this.singer.create_time,
        singerAddress:this.singer.singerAddress,
        singerId:this.singer.singerId
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    submitInsert(){
      this.dialog.dialogInsert = false
      this.$http.post("/singer/insertSinger",{
        singerName:this.singer.singerName,
        singerSex:this.singer.singerSex,
        singerIndroduce:this.singer.singerIndroduce,
        create_time:this.singer.create_time,
        singerAddress:this.singer.singerAddress,
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    }
  }
}
</script>

<style scoped>
.block{
  margin-top: 20px;
  text-align: center;
}
</style>